<template>
  <q-layout view="lHh lpR fFf">

    <q-header style="background-color: #304156"    class="tw-text-gray-400">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer"/>
        <q-toolbar-title>
          <q-breadcrumbs ref="breadcrumbs" id="breadcrumbs"  style="font-size: 15px">
            <q-breadcrumbs-el icon="home" label="选题系统后台" />
          </q-breadcrumbs>

        </q-toolbar-title>
        <q-space />

        <q-btn dense flat round icon="fullscreen" @click="fullscreen()" />
        <q-btn dense flat round icon="logout" class="tw-ml-2" @click="logout" />
        <q-avatar class="tw-ml-4">
          <img src="https://cdn.quasar.dev/img/avatar.png">
        </q-avatar>
      </q-toolbar>

    </q-header>
    <q-drawer style="background-color: #304156" class="text-white tw-m-auto"  show-if-above v-model="leftDrawerOpen" side="left" bordered>
      <q-list>
        <q-item class="text-h5">
          <q-item-section >导航栏</q-item-section>
        </q-item>
        <q-item clickable to="/a/index" >
          <q-item-section avatar ><q-icon  size="sm" name="home"/></q-item-section>
          <q-item-section > 首页</q-item-section>
        </q-item>
        <q-item clickable to="/a/tea">
          <q-item-section avatar> <q-icon  size="sm" name="star"/></q-item-section>
          <q-item-section>教师信息维护</q-item-section>
        </q-item>

        <q-item clickable to="/a/stu">
          <q-item-section avatar> <q-icon  size="sm" name="school"/></q-item-section>
          <q-item-section>学生信息维护</q-item-section>
        </q-item>

        <q-item clickable to="/a/config">
          <q-item-section avatar> <q-icon  size="sm" name="settings"/></q-item-section>
          <q-item-section>个人信息维护</q-item-section>
        </q-item>
        <q-item clickable to="/a/batch">
          <q-item-section avatar> <q-icon  size="sm" name="menu"/></q-item-section>
          <q-item-section>批量导入</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container >
      <router-view class="q-mt-lg"/>
    </q-page-container>

  </q-layout>
</template>

<script setup>
import {ref, watch} from "vue";
import {useRouter} from "vue-router";

const router = useRouter();
let path = ref( router.currentRoute.value.path)


let leftDrawerOpen = ref(false)
let toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};
let fullscreen = ()=>{
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
}
let logout = ()=>{
  localStorage.removeItem('info')
  router.push('/login')
}

</script>

<style scoped>

</style>
